<template>
    <div class="search-panel">
      <el-row class="m-header-search">
        <el-col class="el-col left" :span='3'>
          <img src="//s0.meituan.net/bs/fe-web-meituan/e5eeaef/img/logo.png" alt="美团">
        </el-col>
        <el-col class="el-col center" :span='15'>
          <div class="wrapper">
            <el-input placeholder="搜索商家或地点" v-model="search_val" @focus="isfocus = true" @blur="isfocus = false" :title='search_key'  ></el-input>
            <button class="el-button el-button--primary" >
              <i class="el-icon-search"></i>
            </button>
            <div class="searchList" v-if="search_val && isfocus">
              <dd v-for="(item, index) in searchList" :key="index">{{item.name}}</dd>
            </div>
            <div class="hotPlace" v-if="!search_val && isfocus">
              <dt>热门搜索</dt>
              <dd v-for="(item, index) in $store.state.home.hotPlace.slice(0,5)" :key="index">{{item.name}}</dd>
            </div>
          </div>
          <p class="suggest">
            <a v-for="(item, index) in $store.state.home.hotPlace.slice(0,5)" :key="index" :href="'/keys/'+item.name">{{item.name}}</a>
          </p>
          <ul class="nav">
            <li>
              <nuxt-link to="/" class="takeout">美团外卖</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/" class="movie">猫眼电影</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/" class="hotel">美团酒店</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/" class="apartment">民宿/公寓</nuxt-link>
            </li>
            <li>
              <nuxt-link to="/" class="business">商家入驻</nuxt-link>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
</template>
 
<script lang='ts' src='./searchBar.ts'></script>
<style lang='scss' scoped>
</style>